<template>
	<view class="content">
		<view class="top">
			<uni-nav-bar left-icon="back" fixed="true" backgroundColor="url('/webh5/static/topbgye.png')" :title="headText" color="white"
				@clickLeft="returnBack">
			</uni-nav-bar>
		</view>
		<view class="box">
			<view class="heng flex ">
				<text class="text">收货人</text>
				<input class="input" type="text" maxlength="6" placeholder="请输入收货人姓名" placeholder-class="huise" onkeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" v-model="consignee" />
			</view>
			<view class="heng flex ">
				<text class="text">手机号码</text>
				<input class="input" type="number" maxlength="11" placeholder="请输入电话号码" placeholder-class="huise" v-model="phone" />
			</view>
			<view class="heng flex ">
				<text class="text">收货地址</text>
				<input class="input" disabled placeholder="请选择地址" placeholder-class="huise" v-model="adress" @tap="openLevel" />
			</view>
			<view class="henga flex">
				<text class="text">详细地址</text>
				<textarea class="textarea" maxlength="120" placeholder="请输入详细地址" placeholder-class="huise" onkeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" @keydown.enter.native="textareaKeydown" v-model="detailedAddress"/>
			</view>
		</view>
		<view class="moren-box flex">
			<text class="left">设为默认地址</text>
			<switch class="check" color="#8C88FF" style="transform:scale(0.7)" :checked="checkded" @change="switch1Change" />
		</view>
		<view class="btn-boxaaa">
			<button class="btn-box" hover-class="clickclass" @click="submit">保存</button>
		</view>
		<level-linkage ref="levelLinkage"
			:pickerValueDefault="pickerValueDefault" 
			:allData="treeData"
			@onConfirm="onConfirm" themeColor='#007AFF' v-if="addressShow"></level-linkage>
	</view>
</template>

<script>
	var _this;
	const app = getApp();
	import {
		getCookie,
		setCookie
	} from "@/utils/cookie.js";
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import levelLinkage from "@/components/three-level-linkage/linkage.vue"
	export default {
		components: {
			uniNavBar,
			levelLinkage
		},
		data() {
			return {
				headText:'',//自定义导航栏文字
				consignee:'',//收货人
				phone:'',//收货人电话号码
				adress:'',//收货地址
				detailedAddress:'',//详细地址
				typec:'',
				checkded:false,
				adressId:'',//地址ID，从地址列表来修改的
				treeData:[],
				cityPickerValueDefault:[],
				pickerValueDefault: [0, 0, 0],
				yao:'',//传给后端的二级地址的参数
				addressShow:false,
			};
		},
		onLoad(options) {
			_this = this;
			_this.getAreas();
			if(options.type){
				_this.typec=options.type;
				_this.headText=options.type+'收货地址';
			}
			if(options.id&&options.id!=='undefined'){
				_this.adressId=options.id;
				_this.getAddress();
			}
		},
		onShow() {

		},
		methods: {
			returnBack() {
				// #ifdef H5
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack(1)
					return;
				}
				//使用vue-router返回上一级
				let a = this.$router.go(-1)
				if (a == undefined) {
					//重新定向跳转页面
					uni.reLaunch({
						url: "/pages/address/address"
					})
				}
				return;
				// #endif
				uni.navigateBack(1)
			},
			openLevel() {
				// 根据 label 获取
				var index = this.$refs.levelLinkage.queryIndex(_this.cityPickerValueDefault.length>0?_this.cityPickerValueDefault:['北京市','北京市','东城区'], 'label');
				this.pickerValueDefault = index.index;
				this.$refs.levelLinkage.open();
			},
			onConfirm(e) {
				// e 确认后选中的数据
				let arr=[];
				arr[0]=e.firstPick.name;
				arr[1]=e.secondPick.name;
				arr[2]=e.thirdPick.name;
				_this.cityPickerValueDefault = arr;
				_this.adress=e.name;
				_this.yao=e.secondPick.id;
			},
			switch1Change(e){
				 _this.checkded=e.target.value;
			},
			getAreas(){
				_this.$HTTP({
					method: 'GET',
					url: 'fjSystemCity/city_list',
					data: {
						"time":Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					if(res.data.length>0){
						_this.treeData=res.data;
						_this.addressShow=true;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getAddress(){
				_this.$HTTP({
					method: 'GET',
					url: 'fjUserAddress/getAddress',
					data: {
						"time":Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					if(res.data){
						res.data.forEach(item => {
							if(_this.adressId==item.id){
								_this.consignee=item.realName?item.realName:'';
								_this.phone=item.phone?item.phone:'';
								_this.adress=item.province?item.province+'-'+item.city+'-'+item.district:'';
								_this.detailedAddress=item.detail?item.detail:'';
								_this.checkded=item.isDefault==1?true:false;
								_this.cityPickerValueDefault.push(item.province)
								_this.cityPickerValueDefault.push(item.city)
								_this.cityPickerValueDefault.push(item.district)
							}
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 阻止多行文本框换行
			textareaKeydown() {
			    let e = window.event || arguments[0];
			    // console.log(e,e.keyCode)
			    if (e.key == 'Enter' || e.code == 'Enter' || e.keyCode == 13) {
			        e.returnValue = false;
			        return false;
			    }
			},
			submit() {
				if(!_this.consignee){
					_this.$api.msg('收货人不能为空');
					return;
				}
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(_this.phone)){
					_this.$api.msg('请输入正确的手机号码');
					return;
				}
				if(!_this.adress){
					_this.$api.msg('收货地址不能为空');
					return;
				}
				if(!_this.detailedAddress){
					_this.$api.msg('详细地址不能为空');
					return;
				}
				if(_this.detailedAddress.length<2){
					_this.$api.msg('详细地址字符为2-120个');
					return;
				}
				_this.$HTTP({
					method: 'POST',
					url: 'fjUserAddress/addMyAddress',
					data: {
						"id": _this.adressId?_this.adressId:'',
						"realName": _this.consignee,
						"phone": _this.phone,
						"cityId": _this.yao,
						"province": _this.cityPickerValueDefault[0],
						"city": _this.cityPickerValueDefault[1],
						"district": _this.cityPickerValueDefault[2],
						"detail": _this.detailedAddress,
						"isDefault": _this.checkded?1:0,
						"time":Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					_this.$api.msg(_this.typec+'成功，即将跳转页面');
					setTimeout(function(){
						_this.returnBack();
					},2000)
				}).catch(err => {
					console.log(err)
				})
			},
		}
	}
</script>
<style lang="less">
	page {
		width: 100%;
		background: #FBFBFF;
	}
</style>
<style scoped lang="less">
	.top {
		width: 100%;
	}
	.alin{
		align-items: flex-start !important;
	}
	.huise{
		color: #C1C1C1;
	}
	.clickclass {
		transform: scale(0.9, 0.9);
	}
	.content {
		width: 100%;
		.box{
			width: 100%;
			background: #FFFFFF;
			.heng {
				width: 100%;
				height: 120rpx;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 20rpx;
				.text{
					width: 28%;
					font-size: 28rpx;
					font-weight: 400;
					color: #000000;
				}
				.input{
					width: 72%;
					height: 60rpx;
					font-size: 28rpx;
				}
			}
			.henga {
				width: 100%;
				height: 160rpx;
				align-items: flex-start;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 40rpx 20rpx 0 20rpx;
				.text{
					width: 28%;
					font-size: 32rpx;
					font-family: SimHei;
					font-weight: 400;
					color: #000000;
				}
				.textarea{
					width: 72%;
					height: 100rpx;
					font-size: 32rpx;
				}
			}
			
		}
		.moren-box{
			width: 100%;
			margin-top: 20rpx;
			background: #FFFFFF;
			height: 85rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			align-items: center;
			justify-content: space-between;
			.left{
				font-size: 28rpx;
				font-weight: 400;
				color: #000000;
			}
		}
		.btn-boxaaa{
			width: 100%;
			box-sizing: border-box;
			padding: 0 60rpx;
			margin-top: 70rpx;
			.btn-box{
				width: 100%;
				line-height: 80rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
				height: 80rpx;
				background: linear-gradient(90deg, #ABFCFF 0%, #A1BEFF 49%, #E0B1FF 100%);
				border-radius: 30rpx;
			}
		}
		
	}
</style>
